<template>
  <div>
    <Page ref="page" :search-config="searchConfig" :table-config="tableConfig" :toolbar-config="toolbarConfig" />
    <role-add ref="roleAdd" :authData @save-success="addSuccess" />
    <role-update ref="roleUpdate" :authData :leafNode @save-success="updateSuccess" />
  </div>
</template>
<script setup lang="ts">
import { getMenuTreeList } from "@/api/user/menuApi";
import { delRole, queryRolePage } from "@/api/user/roleApi";
import { PageSearchConfig, PageTableConfig, ToolbarConfig, MPage as Page } from "page-com";
import { reactive, ref, shallowReactive, useTemplateRef, provide, shallowRef } from "vue";
import RoleAdd from "./RoleAdd.vue";
import { msgConfirm, successMsg } from "@/utils/message";
import RoleUpdate from "./RoleUpdate.vue";
import { accessTree } from "@/utils/tree";
import { hasPerms } from "@/utils/auth";
import { useOffineIcon } from "@/components/ReIcon/src/hooks";
const authData = shallowRef<ShopTreeMenuVo[]>([]);
const leafNode = new Set<string>();
getMenuTreeList().then(res => {
  if (res.code == RESPONSE_CODE.SUCCESS) {
    authData.value = res.data;
    accessTree(res.data, v => {
      if (!v.children || v.children.length == 0) {
        leafNode.add(v.menuPath);
      }
    });
  }
});
const searchConfig = shallowReactive<PageSearchConfig>({
  pageSearchFrame: [
    {
      frameType: "input",
      key: "name",
      label: "角色名"
    },
    {
      frameType: "datetimerange",
      key: "createTime",
      label: "创建时间",
      searchKey: ["createTimeStart", "createTimeEnd"]
    }
  ],
  searchFun: queryRolePage
});
const tableConfig = reactive<PageTableConfig>({
  pageTableFrame: [
    {
      key: "name",
      label: "角色名"
    },
    {
      key: "createTime",
      label: "创建时间"
    },
    {
      frameType: "multi",
      key: "multi",
      label: "操作",
      separate: "",
      multi: [
        {
          frameType: "link",
          value: "删除",
          key: "deleteBtn",
          icon: useOffineIcon("ep:delete"),
          click: deleteFun,
          visible: hasPerms("/system/auth/del")
        },
        {
          frameType: "link",
          value: "修改",
          key: "updateBtn",
          icon: useOffineIcon("ep:edit"),
          click: showUpdate,
          visible: hasPerms("/system/auth/update")
        }
      ]
    }
  ]
});
const toolbarConfig = shallowReactive<ToolbarConfig>({
  buttons: [
    {
      value: "添加角色",
      click: showAdd,
      visible: hasPerms("/system/auth/add")
    }
  ]
});
const roleAdd = useTemplateRef("roleAdd");
const page = useTemplateRef("page");
function showAdd() {
  roleAdd.value.show();
}
const roleUpdate = useTemplateRef("roleUpdate");
function showUpdate(vo: ShopRoleVo) {
  roleUpdate.value.show(vo);
}

function addSuccess() {
  page.value.onSearch();
}
function updateSuccess() {
  page.value.onSearch();
}

function deleteFun({ id }: ShopRoleVo) {
  msgConfirm("确认删除吗？", async () => {
    let res = await delRole({ id });
    if (res.code == RESPONSE_CODE.SUCCESS) {
      successMsg("删除成功");
      page.value.onSearch();
    }
    return res;
  });
}
</script>
